import React from "react";
import { Link } from "react-router-dom";
import "./NotFound.css";

const NotFound: React.FC = () => {
  return (
    <div className="not-found-container">
      <div className="not-found-content">
        <div className="not-found-code">404</div>
        <h1>页面未找到</h1>
        <p className="not-found-message">
          很抱歉，您访问的页面不存在或已被移除。
        </p>
        <div className="not-found-actions">
          <Link to="/" className="back-home-btn">
            返回首页
          </Link>
          <button className="report-btn" onClick={() => window.history.back()}>
            返回上页
          </button>
        </div>
        <div className="not-found-help">
          <p>您可能想要的页面：</p>
          <ul className="not-found-links">
            <li>
              <Link to="/dashboard">仪表盘</Link>
            </li>
            <li>
              <Link to="/profile">个人中心</Link>
            </li>
            <li>
              <Link to="/help">帮助中心</Link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default NotFound;
